<!-- 首页-->
<template>
  <div class="grid" id="top">
    <div class="col-12">
      <!-- 头部导航栏 -->
      <el-container class="home-container animated fadeIn">
        <HeaderNavsBar class="" style="margin-top: 10px"> </HeaderNavsBar>
        <el-main class="home-banner animated zoomIn">
          <div class="blog-title">
            <h1>博客详情</h1>
          </div>
        </el-main>
      </el-container>
    </div>

    <div class="col-12 animated fadeInLeft">
      <el-container>
        <!--内容主体 -->

        <div style="margin: 0 auto; width: 800px">
          <!-- 头部 -->
          <div class="blog-header">
            <div class="article-msg-user">
              <div class="userInfo">
                <el-skeleton
                  style="width: 240px; position: absolute; top: 1px; left: 30px"
                  animated
                  :loading="loading"
                >
                  <template slot="template">
                    <el-skeleton-item variant="text" />
                  </template>
                </el-skeleton>
                <!-- 用户中心弹窗 -->
                <UserPageHome
                  :userPageHomeVisible="userPageHomeVisible"
                  :userBlogInfo="userBlogInfo"
                  @closeUserPageHome="closeUserPageHome"
                ></UserPageHome>
                <div class="avatar" @click="getUserBlogInfo">
                  <el-avatar
                    size="small"
                    :src="article.articleAuthorAvatar"
                  ></el-avatar>
                </div>
                <div class="name" @click="getUserBlogInfo">
                  {{ article.articleAuthorName }}
                </div>
              </div>
              <div class="createTime">
                <i class="el-icon-date"></i>
                {{ article.articleCreateTime }}
              </div>
              <div class="views">
                <i class="el-icon-view"></i>
                {{ article.articleView }}
              </div>
              <div class="likeCount">
                <i class="iconfont icon-dianzan"></i>
                {{ article.articleLikeCount }}
              </div>
              <!-- 关注按钮 -->
              <div class="follow-box">
                <button
                  class="follow-btn"
                  v-if="
                    !article.articleFollow &&
                    article.articleAuthorId !== loginUid
                  "
                  @click="followUser(article)"
                >
                  关注
                </button>
                <button
                  class="follow-btn"
                  v-if="
                    article.articleFollow &&
                    article.articleAuthorId !== loginUid
                  "
                  @click="unFollowUser(article)"
                  style="background-color: #909399"
                >
                  已关注
                </button>
              </div>
            </div>
          </div>
          <!-- 主体-->
          <div class="blog-main">
            <div class="blog-main-img">
              <img :src="article.articleImgUrl" alt="" />
              <el-skeleton animated :loading="loading">
                <template slot="template">
                  <el-skeleton-item
                    variant="image"
                    style="max-width: 100%; height: 100%"
                  />
                </template>
              </el-skeleton>
            </div>
            <div class="blog-main-content">
              <h2 class="title">
                {{ article.articleTitle }}
              </h2>

              <div class="content">
                <mavon-editor
                  class="md"
                  v-highlight
                  v-html="article.articleContent"
                  :subfield="false"
                  :boxShadow="false"
                  :ishljs="true"
                  defaultOpen="preview"
                  :toolbarsFlag="false"
                  ref="markdown"
                />
              </div>
            </div>
          </div>
          <!-- 评论 -->
          <div class="blog-comment-container" ref="comment">
            <div class="segment">
              <div class="comment-header">
                <h3>Comments</h3>
              </div>
              <!-- 评论主体  -->
              <div
                class="comment animated fadeInUp"
                v-for="(comment, index) in commentList"
                :key="index"
              >
                <!-- 头像 -->
                <el-avatar
                  class="avatar"
                  shape="square"
                  size="medium"
                  :src="comment.commentAuthorAvatar"
                ></el-avatar>
                <!-- 父级评论信息 -->
                <div class="content">
                  <a class="author">{{ comment.commentNickname }}</a>
                  <div class="replay-time">
                    <span class="date">{{ comment.commentCreateTime }}</span>
                  </div>
                  <!-- 评论的内容  -->
                  <div class="text">{{ comment.commentContent }}</div>
                  <div class="actions">
                    <a
                      @click="
                        replayComment(
                          comment.commentId,
                          comment.commentNickname
                        )
                      "
                      >回复</a
                    >
                    <a
                      @click="
                        delComment($event, comment.commentId, index, true)
                      "
                      v-if="
                        (loginUid === comment.commentAuthorId ||
                          loginUid === article.articleAuthorId) &&
                        isLogin
                      "
                      >删除</a
                    >
                  </div>
                </div>
                <!-- 子级回复信息 -->
                <div
                  class="comments"
                  v-for="(commentChild, index) in comment.children"
                  :key="index"
                >
                  <div class="comment">
                    <el-avatar
                      class="avatar"
                      shape="square"
                      size="medium"
                      :src="commentChild.commentAuthorAvatar"
                    ></el-avatar>
                    <div class="content">
                      <a class="author">
                        {{ commentChild.commentNickname }}
                        <a class="author" style="margin-right: 2px">回复</a>
                        <a style="color: #4183c4">{{
                          commentChild.commentReplyNickname
                        }}</a>
                      </a>

                      <div class="replay-time">
                        <span class="date">{{
                          commentChild.commentCreateTime
                        }}</span>
                      </div>
                      <!-- 评论的内容  -->
                      <div class="text">{{ commentChild.commentContent }}</div>
                      <div class="actions">
                        <a
                          @click="
                            replayComment(
                              comment.commentId,
                              commentChild.commentNickname
                            )
                          "
                          >回复</a
                        >
                        <a
                          @click="
                            delComment(
                              $event,
                              commentChild.commentId,
                              index,
                              false
                            )
                          "
                          v-if="
                            (loginUid === commentChild.commentReplyAuthorId ||
                              loginUid === article.articleAuthorId) &&
                            isLogin
                          "
                          >删除</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-form ref="ruleForm" label-width="100px" class="ruleForm">
              <el-input
                type="textarea"
                v-model="reply"
                :placeholder="placeholder"
              ></el-input>
            </el-form>
            <el-button type="primary" icon="el-icon-edit" @click="sendComment"
              >发布</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              style="margin-left: 10px"
              @click="resetComment"
              >重置</el-button
            >
          </div>
        </div>

        <!-- 底部 -->
        <el-footer>
          <IndexFooter></IndexFooter>
        </el-footer>
      </el-container>
    </div>
    <ShowLogin :showVisible="visible" @closeLogin="closeLogin"></ShowLogin>

    <!-- 窗口固定按钮 -->
    <div class="fixed-box">
      <div class="fixed-title">操作</div>
      <button class="fixed-btn" @click="goComment">
        <i class="el-icon-s-comment"></i>
      </button>

      <button class="fixed-btn" @click="startArticle">
        <i :class="isStar ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
      </button>

      <button class="fixed-btn" @click="goodArticle">
        <i
          class="iconfont"
          :class="isGood ? 'icon-dianzan1' : 'icon-dianzan  '"
        ></i>
      </button>
      <button class="fixed-btn" @click="goTop">
        <i class="el-icon-arrow-up"></i>
      </button>
    </div>

    <!-- 目录 -->
    <div class="showNav" :class="navMenuVisible ? 'nav-menu-left' : ''">
      <el-button
        type="primary"
        icon="el-icon-s-order"
        @click="navMenuVisible = !navMenuVisible"
      ></el-button>
      <el-drawer
        title="我是目录快点我!(*^▽^*)"
        :visible.sync="navMenuVisible"
        direction="ltr"
        size="20%"
        :modal="false"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="nav">
          <div v-for="(nav, index) in navs" :key="index">
            <div
              v-html="nav.title"
              @click="navTitle(nav.id)"
              :class="'nav-title-indent-' + nav.tab"
              class="nav-title"
            ></div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
// 解析markdown 语法
import { marked } from "marked";
import HeaderNavsBar from "@/components/tools/HeaderNavsBar.vue";
import IndexFooter from "@/components/layout/IndexFooter.vue";
import ArticleApiRequest from "@/api/ArticleApiRequest";
import ShowLogin from "../login/ShowLogin.vue";
import UserApiRequest from "@/api/UserApiRequest";
import UserPageHome from "@/components/layout/UserPageHome.vue";
const userApiRequest = new UserApiRequest();
const articleApiRequest = new ArticleApiRequest();

export default {
  setup() {},
  components: {
    HeaderNavsBar,
    IndexFooter,
    ShowLogin,
    UserPageHome,
  },
  data() {
    return {
      // 登录窗口显示
      visible: false,
      // 文章信息
      article: [],
      // 回复信息
      replayForm: [],
      userBlogInfo: [],
      reply: "",
      // 评论信息
      commentList: [],
      placeholder: "在这里输入你的回复内容",
      // 登录uid
      loginUid: "",
      isStar: false,
      isGood: false,
      isLogin: false,
      isFollow: false,
      articleUserId: "",
      navMenuVisible: false,
      userPageHomeVisible: false,
      navs: [],
      loading: true,
    };
  },
  methods: {
    // 目录转跳
    navTitle(id) {
      let ele = document.getElementById(id);
      ele.scrollIntoView({ behavior: "smooth" });
    },
    // 去顶部
    goTop() {
      let top = document.getElementById("top");

      top.scrollIntoView({ behavior: "smooth" });
    },
    //转跳到评论
    goComment() {
      this.$refs.comment.scrollIntoView({ behavior: "smooth" });
    },
    //重新设置评论
    resetComment() {
      this.replayForm = [];
      this.reply = "";
      this.placeholder = "在这里输入你的回复内容";
    },
    delComment($ev, commentId, index, isParent) {
      console.log("index", index);
      this.$confirm(
        "若该评论有子评论的话会被一起删除，你确定要继续删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 删除
          let data = {
            commentId,
          };

          articleApiRequest.delComment(data).then((res) => {
            if (res.code === 20000) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });

              if (isParent) {
                this.commentList.splice(index, 1);
              } else {
                articleApiRequest
                  .showArticleComment(this.$route.params.id)
                  .then((res) => {
                    if (res.code === 0) {
                      this.$nextTick(() => {
                        this.commentList = res.data;
                      });
                    }
                  });
              }
            }
            if (res.code === 40004) {
              this.$message({
                type: "error",
                message: "删除评论时发生异常!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加回复信息
    replayComment(commentId, commentNickname) {
      this.reply = "";
      this.placeholder = "对" + commentNickname + "说点啥吧：";
      this.replayForm.commentId = commentId;
      this.replayForm.commentNickname = commentNickname;
      this.replayForm.isChildReply = true;
    },
    // 关闭登录窗口
    closeLogin(data) {
      this.visible = data;
    },
    //关闭用户中心
    closeUserPageHome(data) {
      this.userPageHomeVisible = data;
    },
    // 发送评论
    sendComment() {
      // 登录状态检查
      if (!this.sendStatusCheck("回复")) {
        return;
      }

      if (this.reply === "") {
        this.$message({
          type: "warning",
          message: "还没有添加回复的内容哦!",
        });
        return;
      }
      const commentArticleId = parseInt(this.$route.params.id);
      //如果是点击回复按钮 那么就是有回复的哪个父级的id
      const commentId = this.replayForm.commentId;
      // 如果当前是通过点击回复按钮 则存在值, 否则直接默认false
      const isChildReply = this.replayForm.isChildReply || false;
      const commentContent =
        this.reply.split(" ").join("").length == 0
          ? "我是只有空格的回复"
          : this.reply;
      const commentReplyNickname = this.replayForm.commentNickname || null;
      const commentReplyAuthorId = isChildReply ? this.loginUid : null;
      const commentNickname = this.$store.state.userInfo.nickname;
      // 如果当前是点击回复按钮, 那么不存在发送评论的用户id 而只有 回复的用户id
      const commentAuthorId = isChildReply ? -1 : this.loginUid;
      // 数据整合
      let data = {
        commentArticleId,
        commentParentId: isChildReply ? commentId : -1,
        commentReplyAuthorId,
        commentContent,
        commentReplyNickname,
        commentNickname,
        commentAuthorId,
      };

      // console.log(data);
      // 发送添加评论内容
      articleApiRequest.sendComment(data).then((res) => {
        if (res.code === 20000) {
          this.$message({
            type: "success",
            message: "回复评论成功!",
          });
          // 列表刷新
          articleApiRequest
            .showArticleComment(this.$route.params.id)
            .then((res) => {
              if (res.code === 0) {
                this.commentList = res.data;
              }
            });
          this.reply = "";
        }
        if (res.code === 50000) {
          this.$message({
            type: "error",
            message: "当前评论不存在可能被删除了!",
          });
          articleApiRequest
            .showArticleComment(this.$route.params.id)
            .then((res) => {
              if (res.code === 0) {
                this.commentList = res.data;
              }
            });
        }
      });
    },
    // 收藏文章
    startArticle() {
      if (!this.sendStatusCheck("收藏")) {
        return;
      }
      this.isStar = !this.isStar;
      let data = {
        userId: parseInt(this.loginUid),
        articleId: parseInt(this.$route.params.id),
      };
      articleApiRequest.starArticle(data).then((res) => {
        if (res.code === 20001) {
          this.$message({
            type: "success",
            message: "收藏成功",
          });
        }
        if (res.code === 20002) {
          this.$message({
            type: "success",
            message: "已取消收藏",
          });
        }
        if (res.code === -421) {
          this.$message({
            type: "warning",
            message: "请不要重复收藏",
          });
        }
      });
    },
    // 点赞文章
    goodArticle() {
      if (!this.sendStatusCheck("点赞")) {
        return;
      }
      this.isGood = !this.isGood;
      let data = {
        userId: parseInt(this.loginUid),
        articleId: parseInt(this.$route.params.id),
      };
      articleApiRequest.goodArticle(data).then((res) => {
        if (res.code === 20000) {
          this.$message({
            type: "success",
            message: "点赞成功",
          });
        }
        if (res.code === 20003) {
          this.$message({
            type: "success",
            message: "已取消点赞",
          });
        }
        if (res.code === -420) {
          this.$message({
            type: "warning",
            message: "请不要重复点赞",
          });
        }
      });
    },
    sendStatusCheck(data) {
      if (!this.$store.state.isLogin) {
        this.$confirm("登录后才能" + data + "哦,是否登录呢?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.visible = true;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "你选择不登录",
            });
            return false;
          });

        return;
      } else {
        return true;
      }
    },
    // 关注当前文章用户
    followUser(article) {
      if (!this.sendStatusCheck("关注")) {
        return;
      }
      this.article.articleFollow = true;
      // 数据整合
      let data = {
        followUserId: article.articleAuthorId,
        followUserAvatar: article.articleAuthorAvatar,
        followerUserId: this.loginUid,
        followerUserAvatar: this.$store.state.userInfo.loginUrlAvatar,
      };
      // 发送关注请求
      userApiRequest.followUser(data).then((res) => {
        if (res.code === 0) {
          this.$message.success("关注成功");
        }
        if (res.code === 208) {
          this.$message.success("你已经关注过了哦");
        }
      });
    },
    //取消关注当前文章用户
    unFollowUser(article) {
      if (!this.sendStatusCheck("取消关注")) {
        return;
      }
      this.article.articleFollow = false;
      let data = {
        followUserId: article.articleAuthorId,
        followUserAvatar: article.articleAuthorAvatar,
        followerUserId: this.loginUid,
        followerUserAvatar: this.$store.state.userInfo.loginUrlAvatar,
      };
      // 发送关注请求
      userApiRequest.unFollowUser(data).then((res) => {
        if (res.code === 0) {
          this.$message.success("取消关注成功");
        }
      });
    },
    //点击头像与用户名 获取用户的个人信息
    getUserBlogInfo() {
      let data = {
        userId: this.article.articleAuthorId,
      };
      userApiRequest.getUserBlogInfo(data).then((res) => {
        this.userBlogInfo = res.data;
      });
      this.userPageHomeVisible = true;
    },
  },
  // 在创建的时候获取路由传递过来的数据
  mounted() {
    //根据id查询文章信息
    let data = {
      userId: this.$store.state.userInfo.uid,
    };
    // 中文
    var pattern = new RegExp("[\u4E00-\u9FA5]+");
    // 英文
    var pattern2 = new RegExp("[A-Za-z]+");
    if (
      pattern.test(this.$route.params.id) ||
      pattern2.test(this.$route.params.id)
    ) {
      this.$message({
        type: "error",
        message: "不存在该文章",
      });
      this.$router.push("/index");
    }
    //点击文章的时候查询当前用户是否已经点赞收藏 并显示在页面上
    articleApiRequest.showArticle(this.$route.params.id, data).then((res) => {
      if (res.code === 0) {
        this.article = res.data;
        this.articleUserId = this.article.articleAuthorId;
        this.isGood = this.article.articleIsGood;
        this.isStar = this.article.articleIsStar;
        this.loading = false;
        // 解析文章内容,进行获取标题
        this.article.articleContent = marked.parse(this.article.articleContent);
        this.$nextTick(() => {
          // 获取$el
          const $el = this.$refs.markdown.$el;
          if ($el) {
            let childList = $el.children;
            for (let child of childList) {
              let nodeName = child.nodeName;
              // 获取H开头标签
              if (nodeName.indexOf("H") !== -1) {
                let num = nodeName.substring(1);
                // 数据塞入
                this.navs.push({
                  title: child.innerText,
                  tab: num,
                  id: child.getAttribute("id"),
                });
              }
            }
          }
        });
      }
      if (res.code === -417) {
        this.$message({
          message: "当前文章不存在或已被删除",
          type: "error",
        });
        this.$router.push("/index");
      }
    });

    // 根据id 查询文章评论信息
    articleApiRequest.showArticleComment(this.$route.params.id).then((res) => {
      if (res.code === 0) {
        this.commentList = res.data;
      }
    });
    //保存登录用户id 以及登录状态
    this.loginUid = this.$store.state.userInfo.uid;
    this.isLogin = this.$store.state.isLogin;
  },
  destroyed() {},

  watch: {
    // 当进行搜索的时候 路由中的数据会变化, 监听路由 发生变化重新加载数据
    // 直接获取对应的文章信息
    $route() {
      let data = {
        userId: this.$store.state.userInfo.uid,
      };
      // 中文
      var pattern = new RegExp("[\u4E00-\u9FA5]+");
      // 英文
      var pattern2 = new RegExp("[A-Za-z]+");
      if (
        pattern.test(this.$route.params.id) ||
        pattern2.test(this.$route.params.id)
      ) {
        this.$message({
          type: "error",
          message: "不存在该文章",
        });
        this.$router.push("/index");
      }

      //点击文章的时候查询当前用户是否已经点赞收藏关注 并显示在页面上
      articleApiRequest.showArticle(this.$route.params.id, data).then((res) => {
        if (res.code === 0) {
          this.article = res.data;
          this.isGood = this.article.articleIsGood;
          this.isStar = this.article.articleIsStar;
          this.article.articleContent = marked.parse(
            this.article.articleContent
          );
        }
        if (res.code === -417) {
          this.$message({
            message: "当前文章不存在或已被删除",
            type: "error",
          });
          this.$router.push("/index");
        }
      });
      // 根据id 查询文章评论信息
      articleApiRequest
        .showArticleComment(this.$route.params.id)
        .then((res) => {
          if (res.code === 0) {
            this.commentList = res.data;
          }
        });
      //保存登录用户id
      this.loginUid = this.$store.state.userInfo.uid;
    },
  },
};
</script>
<style lang="scss" scoped>
html {
  width: 100%;
  overflow: hidden;
}

.showNav {
  position: fixed;
  left: 0;
  bottom: 50%;
  animation: all 1s !important;
  .nav-title {
    color: skyblue;
    cursor: pointer;
  }
  .nav-title:hover {
    text-decoration: underline;
  }
}
.nav-menu-left {
  left: 20%;
}
.nav-title-indent-1 {
  text-indent: 10px;
}
.nav-title-indent-2 {
  text-indent: 20px;
}
.nav-title-indent-3 {
  text-indent: 30px;
}

.nav-title-indent-4 {
  text-indent: 40px;
}
.nav-title-indent-5 {
  text-indent: 50px;
}
.nav-title-indent-6 {
  text-indent: 60px;
}
.home-container {
  width: 100%;
  height: 69vh !important;
  background: url("https://map-zblog.oss-cn-guangzhou.aliyuncs.com/backgroundImg/blogpsc.jpg")
    no-repeat 50% / cover fixed;
}
.home-banner {
  margin: 0 auto;
  .blog-title {
    margin-top: 20vh;
    text-align: center;
    color: #eee;
    font-size: 28px;
  }
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.el-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header-float {
  cursor: default !important;
}

.blog-header {
  border-radius: 0.28571429rem;
  padding: 14px;
  border: 1px solid #d4d4d5;
  background-color: #fff;
  .article-msg-user {
    position: relative;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    & > div {
      margin-right: 5px;
      // margin-bottom: 10px;
    }
    .avatar {
      display: flex;
      cursor: pointer;
    }
    .userInfo {
      position: relative;
      .name {
        margin: 0 8px;
        cursor: pointer;
      }
      .views {
        margin: 0 6px;
      }
      line-height: 28px;
      display: flex;
      color: #1685a9;
    }
    .follow-box {
      position: absolute;
      top: 0;
      right: 20px;
      margin-left: 25px;
      .follow-btn {
        padding: 4px 8px;
        background-color: skyblue;
        border-radius: 8px;
        border: none;
        color: #fff;
        border: 1px solid #d1d2d3;
        cursor: pointer;

        &:hover {
          border: 1px solid #6d6f72;
          transition: all 0.4s;
        }
      }
    }
  }
}
.blog-main {
  border-radius: 0.28571429rem;
  border-top: none !important;
  border: 1px solid #d4d4d5;
  background-color: #fff;

  .blog-main-img {
    text-align: center;
    border-bottom: 1px solid #d4d4d5;
    padding: 10px;
    img {
      max-width: 100%;
      height: auto;
    }
  }

  .blog-main-content {
    padding: 20px;
    .title {
      margin: 20px 0;
      text-align: center;
      word-break: break-all;
      word-wrap: break-word;
    }
    .content {
      padding: 2em 4em !important;
      word-break: break-all;
      word-wrap: break-word;
    }
  }
}

.blog-comment-container {
  margin: 20px 0;
  padding: 14px;
  border: 1px solid #d4d4d5;
  border-radius: 0.28571429rem;
  background-color: #fff;
  .segment {
    border-top: 2px solid #2185d0 !important;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(70, 75, 80, 0.15);
    margin: 1rem 0;
    padding: 1em 1em;
    border-radius: 0.28571429rem;
    border: 1px solid rgba(34, 36, 38, 0.15);
    .comment-header h3 {
      font-weight: 400 !important;
      color: rgba(0, 0, 0, 0.87);
      border-bottom: 1px solid #d4d4d5;
    }
  }

  .comment {
    margin-top: 20px;
    .content {
      margin-left: 3.5em;
    }
    .avatar {
      float: left;
      margin: 0.2em 0;
    }
    .author {
      font-size: 12px;
      font-weight: 700;
    }
    .replay-time {
      margin-left: 5px;
      display: inline-block;
      color: rgba(0, 0, 0, 0.4);
      font-size: 10px;
    }
    .text {
      margin: 5px 0;
      color: rgba(0, 0, 0, 0.87);
      line-height: 1.5em;
      font: 12px/1.5 Tahoma, Helvetica, Arial, "宋体", sans-serif;
      //color: #000000;
    }

    .actions {
      font-size: 10px;
      a {
        margin-right: 5px;
        color: rgba(0, 0, 0, 0.4);
        cursor: pointer;
      }
    }
  }

  .comments {
    margin: -1.5em 0 -1em 1.25em;
    padding: 2em 0 1em 1.5em;
    -webkit-box-shadow: -1px 0 0 rgba(34, 36, 38, 0.15);
    box-shadow: -1px 0 0 rgba(34, 36, 38, 0.15);
  }
  .ruleForm {
    margin-bottom: 10px;
  }
}
::v-deep .el-textarea__inner {
  height: 152px !important;
}

.fixed-box {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  right: 20px;
  bottom: 70px;
  background-color: #e0e1e2;
  .fixed-title {
    width: 100%;
    padding: 4px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background-color: skyblue;
  }
  .fixed-btn {
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  .fixed-btn:hover {
    background-color: pink;
  }
}
pre {
  display: block;
  padding: 9.5px;
  max-height: 500px !important;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all !important;
  word-wrap: break-word !important;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  white-space: normal;
}
</style>
